<template>
  <div class="regbox">
    <van-nav-bar
      title="注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="c">
      <img src="../../assets/image/orange.png" alt />
      <div class="reg">
        <van-field
          v-model="data.phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="data.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="data.nickname"
          name="昵称"
          label="昵称"
          placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" @click="submit">注册</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getReg } from "../../request/api";
export default {
  data() {
    return {
      data: {
        phone: "",
        password: "",
        nickname: ""
      }
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/login");
    },
    submit() {
      if (
        this.data.phone == "" ||
        this.data.password == "" ||
        this.data.nickname == ""
      ) {
        alert("不能为空");
      } else {
        getReg(this.data).then(res => {
          console.log(this.data);
          console.log(res);
          if (res.code == 200) {
            alert(res.msg);
            this.$router.push("/login");
          } else if (res.code == 500) {
            alert(res.msg);
          }
        });
      }
    }
  },
  mounted() {}
};
</script>

<style sccoped>
.regbox {
  height: 100vh;
  width: 100vw;
}
img {
  width: 1.5rem;
  height: 0.5rem;
}
.c {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 80%;
}
.van-nav-bar__content {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
</style>